<template>
  <div v-if="userInfo.id>0" style="position: relative;" :style="{
    width:'100%',
    top:(0)+'px',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
  }">
    <div class="page-title" style="background: none; position: fixed" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.back()">
        <i style="color: #EEEEEE" href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span style="color: #EEEEEE">每日签到</span>
      <i class="sign-list-more-button el-icon-more" @click="$router.push('/MemberSignList')"></i>
    </div>

    <div id="member-sign-month-content" style="width: 100%;" :style="{
      height: (this.getWinSize().height-this.getSafeArea().top-50)+'px',
      paddingTop:'50px',
    }">
      <div style="position: relative; /*background: rgba(255,255,255,.3);*/ border-radius: 10px; height: 50px; width: 50%; text-align: center; margin: 0px auto;" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
        <el-button :type="userInfo.currDaySignNums>0?'info':'success'" class="sign-button" size="medium" style="position: relative; top: 15px;" @click="sign"
                   :disabled="userInfo.currDaySignNums>0"
                   v-text="userInfo.currDaySignNums>0?'今日已签到':'点击签到'"></el-button>
      </div>

      <div style="position: relative; line-height: 30px; color: #444444; text-align: center; width: 90%; margin: 0px auto;background: rgba(255,255,255,.3); border-radius: 5px; font-size: 14px;" :style="{
      top:(this.getSafeArea().top+20)+'px'
    }">
        <div v-if="userInfo.currMonthSignDayList.length>0"><span>本月已签到 <b>{{ userInfo.currMonthSignDayList.length }}</b> 次，</span><span>下次签到将额外获得 <b>{{ getNextScore() }}</b> 积分</span> </div>
      </div>

      <div style="position: relative; background: red; width: 100%;" :style="{
        top:(this.getSafeArea().top+40)+'px'
      }">
        <el-calendar :value="currDate">
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(2).join('-') }} {{ checkSign(data.day) ? '✔️' : ''}}
            </p>
          </template>
        </el-calendar>
      </div>
    </div>


  </div>
</template>

<script>
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'MemberLog',
  components: {IScrollerBox},
  data: function () {
    return {
      currDate:new Date(),
      userInfo:{
        "id": 0,
        "username": "",
        "nickname": "—",
        "sex": "男",
        "birthday": "1993-09-19",
        "money": 45977,
        "commission": 0,
        "icon": "",
        "invitationCode": "",
        "level": 0,
        "score": 8,
        "orderNums": {
          "needReplyNums": 1,
          "completedNums": 1,
          "needPayNums": 0,
          "count": 7,
          "needSendNums": 6,
          "applyNums": 1,
          "needReceiveNums": 0
        },
        "bindingShopNums": 0,
        "ex": 0,
        "isCancel": {
          "name": "否",
          "id": 0
        },
        "currMonthSignNums": 0,
        "currDaySignNums": 0,
        "currMonthSignDayList": [],
        "cancelTime": null
      },
      VipMonthlySignList:dict.VipMonthlySignList,
    }
  },
  mounted () {
    let $this=this
    setTimeout(function () {
      $this.getInfo()
    },130)
  },
  methods: {
    sign: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/sign', {}, function (data) {
        $this.$message.success('签到成功!')
        $this.getInfo()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    getInfo: function () {
      let $this = this
      $this.userInfo.id=0
      $this.MyRequest($this.ApiDoNameMember + 'Member/info', {}, function (data) {
        $this.userInfo=data
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    getNextScore:function () {
      var size=this.userInfo.currMonthSignDayList.length+1
      if (size<this.VipMonthlySignList.length && size>1){
        return this.VipMonthlySignList[size-1]
      }
    },
    checkSign:function (day) {
      var signDayList=[]
      let $this=this
      $this.userInfo.currMonthSignDayList.forEach(function (value, index) {
        signDayList.push(value)
      })
      if (signDayList.indexOf(day)>-1){
        return true
      }
      return false
    },
    // 如果有登录状态,则获取会员信息
    getUserInfo:function (callback) {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/info', {}, function (data) {
        if ($this.currType.key==='commissionLog'){
          $this.currValue=data.commission
        }
        if ($this.currType.key==='moneyLog'){
          $this.currValue=data.money
        }
        if ($this.currType.key==='scoreLog'){
          $this.currValue=data.score
        }
        callback()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
  }
}
</script>

<style>
.el-calendar-table .el-calendar-day{
  height: 50px;
}
.el-calendar__header{ display: none}
.el-calendar-table>tbody>tr.el-calendar-table__row:nth-child(6){ display: none}
button.sign-button[disabled="disabled"]{ opacity: 1}
.sign-list-more-button{ position: absolute; right: 15px; top: 8px; color: #EEEEEE; font-size: 18px;}
</style>
